<template>
  <div>
    <div class="box"></div>
    <div class="bigbut" v-show="!isFocus">
      <div class="but">
        <span class="right">
          <!-- 收藏 -->
          <van-icon
            name="star"
            @click="star"
            :class="{ gostar: obj.has_star }" />
          <!-- 分享 -->
          <van-icon name="share " @click="share"
        /></span>
      </div>
    </div>
    <!-- <van-cell title="显示分享面板" @click="showShare = false" /> -->
    <van-share-sheet
      v-model="showShare"
      title="分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "@/utils/myaxios.js";
export default {
  props: {
    obj: {
      type: Object,
      required: true,
    },
    idobj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      isFocus: false,
      //分享框
      showShare: false,
      // 分享数组
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      content: "",
      onoff: true,
    };
  },
  methods: {
      getuserstar(id)
      {
        axios(id).then((res) => {
        if (res.data.message == "获取成功") {
          res.data.data.head_img =
            axios.defaults.baseURL + res.data.data.head_img;
          this.obj = res.data.data;
        }
      });
      },
    //取消按钮事件
    cancel() {
      this.isFocus = false;
     
      this.content = "";
      
      //给父组件触底了事件,告知我这边取消了
      //子组件中props中获取的数据不能进行修改,所以只能传递事件回去父组件进行间接修改数据
      this.$emit("mycancel");
    },
    //收藏
     star() {
      // console.log(this.obj);
      let res = this.getuserstar(this.obj.id);
      this.obj.has_star = !this.obj.has_star;
      // console.log(res);
      Toast.success(res.data.message);
      // console.log("点击了收藏...");
    },
     share() {
      // console.log("要去分享...");
      this.showShare = !this.showShare;
    },
    
     onSelect(option) {
      Toast.success("分享成功");
      this.showShare = false;
    },
  },
  watch: {
   
  
  },
};
</script>

<style lang="less" scoped>

.box {
  height: 50px;
}
.bigbut {
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  // padding: 0 15px;
  background: #eee;
  left: 0;

  .but {
    height: 50px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ccc;
    align-items: center;
    color: #999;
    width: 100%;
    font-size: 25px;

    .right {
      width: 100px;
      display: flex;
      justify-content: space-between;
      .gostar {
        color: orange;
      }
    }
  }
}
</style>